<template>
    <div>
        <div class="w100 haed bbg">
            <img class="fl hpd pa" @click="onClickLeft" style="height: 40rem;left: 20rem;top: 7rem;"
                src="../../assets/img/back.png">
            <p class="fz37 cfff hpd tc">订单详情</p>
        </div>
        <el-card class="box-card" style="margin-top: -275rem;">
            <div slot="header" class="clearfix">
                <h2>核销码{{order.verification}}</h2>
                <p>车辆:奔驰FWE4/豫A98FHJ</p>
            </div>
            <div class="text item">
                <h2>服务内容</h2>
                <div class="text-flex">
                    <p>{{ order.serviceItem }}</p>
                    <p>￥100.00</p>
                </div>
                <div class="text-flex">
                    <p>车辆精洗附加费</p>
                    <p>￥10</p>
                </div>
            </div>
            <div class="text mt40">
                <h2>订单信息</h2>
                <div class="text-flex">
                    <p>原价</p>
                    <p>￥{{ order.originPrice }}</p>
                </div>
                <div class="text-flex">
                    <p>优惠</p>
                    <p>{{ order.discount }}</p>
                </div>
                <div class="text-flex">
                    <p>实付金额</p>
                    <p>￥{{ order.currentPrice }}</p>
                </div>
                <div class="text-flex">
                    <p>订单编号</p>
                    <p>{{ order.orderCode }}</p>
                </div>
                <div class="text-flex">
                    <p>预约时间</p>
                    <p>{{ order.bookingTime }}</p>
                </div>
                <div class="text-flex">
                    <p>支付时间</p>
                    <p> {{ order.createdDate }}</p>
                </div>
                <div class="text-flex">
                    <p>核销时间</p>
                    <p>2020.03.30 15:40</p>
                </div>
            </div>
        </el-card>
        <el-button :disabled="isDisabled" :class="{ 'cancel': true, 'cancelbg': iscancelbg }" type="primary" round
            @click="cencelBtn">{{ iscancel }}</el-button>
    </div>
</template>
<script>
import {order} from '../../api/index'
import { Dialog } from 'vant';
import 'vant/lib/dialog/style';
export default {
    data() {
        return {
            //判断按钮是否禁用
            isDisabled: false,
            //修改按钮背景色
            iscancelbg: false,
            iscancel: '确认核销',
            isBg: true,
            order: {
                originPrice: '',
                currentPrice: '',
                discount: '',
                orderCode: '',
                createdDate: '',
                bookingTime: '',
                verification:'',
                serviceItem:'',
                discount:''
            }
        }
    },
    mounted(){
        order({verification: this.$route.query.result})
        .then(r=>{
            console.log(r);
            this.order = r.data
            this.order.bookingTime = this.onDate(r.data.bookingTime)
            this.order.createdDate = this.onDate(r.data.createdDate)
        })
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1)
        },
        onDate(r) {
            const date = new Date(r);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            const minutes = date.getMinutes();
            const seconds = date.getSeconds();
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        cencelBtn() {
            Dialog.confirm({
                title: '核销此订单',
                message: '请您仔细核对订单，此操作不可撤销\n请谨慎操作!',
                confirmButtonText: '确认',
                confirmButtonColor: '#2377F3',
                cancelButtonText: '取消',
                cencelButtonColor: '#F2F2F2',
                theme: 'round-button',

            })
                .then(() => {
                    this.isDisabled = true
                    //按钮灰色
                    this.iscancelbg = true
                    //改变文字
                    this.iscancel = '已核销'
                })
                .catch(() => {

                });
        }
    }
}
</script>
<style scoped>
.box-card {
    font-size: 20rem;
    margin: 150rem 30rem 80rem 30rem;
    border-radius: 3%;
    border-top-left-radius: 2%;
    border-top-right-radius: 2%;
}

.box-card /deep/ .el-card__header {
    border-bottom: 7px solid #f7f7f7;
}

.box-card /deep/ .el-card__header {
    border-bottom: 7px solid #f7f7f7;
}

>>>.van-goods-action-button--warning {
    color: black;
}

>>> .el-button--primary.is-disabled:hover {
    background-color: #808080;
}

.text-flex {
    display: flex;
    justify-content: space-between;
    padding-bottom: 38rem;
    font-size: 25rem;
}

.text-flex p:nth-child(2) {
    font-size: 21rem;
    font-weight: bold;
}

.text h2 {
    padding-bottom: 40rem;
}

.clearfix {}

.clearfix h2 {
    padding-bottom: 40rem;
}

.clearfix p {
    font-size: 23rem;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}

.item {
    border-bottom: 7px solid #f7f7f7;
}

.clearfix span {
    font-size: 23rem;
    padding-left: 10rem;
}

.cancel {
    color: #fff;
    margin-left: 115rem;
    width: 520rem;
    height: 70rem;
    line-height: 10rem;
    background-color: #0662e6;
}

.cancelbg {
    background-color: #808080;
}
</style>